<template>
  <view class="device-status-page page-content">
    <z-paging ref="paging" v-model="currentList" @query="queryList" :auto="false" :refresher-enabled="true"
      :loading-more-enabled="true" empty-view-text="暂无数据">
      <template #top>
        <up-navbar title="设备状态管理" :autoBack="false" :fixed="true" bgColor="transparent" :border="false" placeholder
          @leftClick="handleBackClick">
        </up-navbar>

        <up-sticky class="padding-20" bgColor="transparent">
          <view class="search-filter-container">
            <up-search v-model="searchForm.keyword" :clearabled="true" :showAction="false" placeholder="请输入泊位号/停车场/设备编号" @search="handleSearch"></up-search>
            
            <view class="filter-container">
              <up-dropdown>
                <up-dropdown-item v-model="searchForm.status" title="状态筛选" :options="statusOptions" @change="handleStatusChange" />
                <up-dropdown-item v-model="searchForm.deviceType" title="设备类型" :options="deviceTypeOptions" @change="handleDeviceTypeChange" />
              </up-dropdown>
            </view>
          </view>
        </up-sticky>
      </template>

      <view class="device-status-list">
        <view class="list-item-card" v-for="(item, index) in currentList" :key="index">
          <view class="card-header">
            <view class="title">
              设备编号：<text class="number">{{ item.deviceNo || '未设置' }}</text>
            </view>
          </view>
          <view class="card-content-box">
            <view class="content">
              <view class="item">
                <text class="label">
                  设备类型：
                </text>
                <view class="value">
                  <view class="item-tag">
                    <up-tag :text="item.deviceTypeName || '未知类型'" type="success"></up-tag>
                  </view>
                </view>
              </view>
              <view class="item">
                <text class="label">
                  停车场：
                </text>
                <text class="value">
                  {{ item.parkingName || '未设置' }}
                </text>
              </view>
              <view class="item">
                <text class="label">
                  心跳最后更新时间：
                </text>
                <text class="value">
                  {{ item.lastHeartbeatTime || '未更新' }}
                </text>
              </view>
              <view class="item">
                <text class="label">
                  泊位号：
                </text>
                <text class="value">
                  {{ item.berthNo || '未设置' }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>

  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { getRealNameVerifyList } from '@/api';

// 搜索表单
const searchForm = reactive({
  keyword: '',
  status: '',
  deviceType: ''
});

// 状态选项
const statusOptions = [
  { label: '全部', value: '' },
  { label: '在线', value: '1' },
  { label: '离线', value: '0' }
];

// 设备类型选项
const deviceTypeOptions = [
  { label: '全部', value: '' },
  { label: '道闸车牌识别', value: '1' },
  { label: '智能物联地磁', value: '2' },
  { label: '免布线视频桩', value: '3' },
  { label: '智能高位视频桩', value: '4' },
  { label: '物联网阻车器', value: '5' },
  { label: '智能巡检设备', value: '6' },
  { label: '智能物联闸机', value: '7' }
];

// z-paging 组件引用
const paging = ref(null);

// 当前显示的列表数据
const currentList = ref([]);

// 处理返回点击事件
const handleBackClick = () => {
  uni.redirectTo({
    url: '/pages/home/index'
  });
};

// 处理搜索
const handleSearch = () => {
  paging.value.reload();
};

// 处理状态变化
const handleStatusChange = () => {
  paging.value.reload();
};

// 处理设备类型变化
const handleDeviceTypeChange = () => {
  paging.value.reload();
};





// 获取设备状态列表数据
const queryList = async (pageNo, pageSize) => {
  const params = {
    pageNum: pageNo,
    pageSize,
    keyword: searchForm.keyword,
    status: searchForm.status,
    deviceType: searchForm.deviceType
  };

  await fetchList(params);
};

// 模拟获取数据
const fetchList = async (params) => {
  try {
    // 这里应该调用实际的API
    // const result = await getDeviceStatusList(params);
    
    // 模拟数据
    const mockData = Array(10).fill(0).map((_, index) => ({
      id: `${index + 1}`,
      deviceNo: `DEV${10000 + index}`,
      deviceTypeId: String((index % 7) + 1),
      deviceTypeName: deviceTypeOptions.find(item => item.value === String((index % 7) + 1))?.label.replace('全部', ''),
      parkingName: `测试停车场${index + 1}`,
      berthNo: `BH${20000 + index}`,
      lastHeartbeatTime: new Date().toLocaleString(),
      status: index % 2 === 0 ? '1' : '0'
    }));
    
    const result = {
      list: mockData,
      total: 100
    };
    
    return paging.value.complete(result.list);
  } catch (error) {
    console.error('获取设备状态列表失败', error);
    return paging.value.complete(false);
  }
};

onMounted(() => {
  paging.value.reload();
});
</script>

<style lang="scss" scoped>
.device-status-page {
  .search-filter-container {
    margin-bottom: 20rpx;
  }

  .device-status-list {
    padding: 0 30rpx;

    .list-item-card {
      .card-content-box {
        padding: 20rpx 30rpx 30rpx;

        .content {
          .item {
            display: flex;
            margin-bottom: 16rpx;

            .label {
              width: 200rpx;
              font-size: 28rpx;
              color: #666666;
            }

            .value {
              flex: 1;
              font-size: 28rpx;
              color: #333333;
              display: flex;
              align-items: center;

              .item-tag {
                margin-right: 10rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>